<!-- MenuComponent.vue -->
<template>
  <el-menu
    class="el-menu-vertical-demo"
    :default-active="activeMenu"
    :default-openeds="openedPaths"
  >
    <template v-for="item in menuData" :key="item.path">
      <!-- 三级菜单判断逻辑 -->
      <el-sub-menu v-if="item.children?.length" :index="item.path">
        <template #title>
          <el-icon v-if="item.icon">
            <component :is="item.icon" />
          </el-icon>
          <RouterLink :to="item.path">{{ item.name }}</RouterLink>
        </template>
        <!-- 递归渲染子菜单 -->
        <menu-component :menu-data="item.children"></menu-component>
      </el-sub-menu>

      <!-- 叶子节点菜单项 -->
      <el-menu-item v-else :index="item.path" :route="{ path: item.path }">
        <el-icon v-if="item.icon">
          <component :is="item.icon" />
        </el-icon>
        <!-- <span>{{ item.name }}</span> -->
        <RouterLink :to="item.path">{{ item.name }}</RouterLink>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import type { PropType } from 'vue'

type Menu = {
  name: string
  path: string
  icon: string
  children?: Menu[]
}

defineProps({
  menuData: {
    type: Array as PropType<Menu[]>,
    required: true,
  },
  activeMenu: {
    type: String,
    default: '1',
  },
  openedPaths: {
    type: Array as PropType<string[]>,
    default: () => [],
  },
})
</script>
